<template>
  <div class="SubItemAnalysisPage">
    <!-- echarts图表处 -->
    <div class="echartsClass" ref="echartsRef"></div>
    <!-- 表格处 -->
    <Table />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject, reactive, onBeforeUnmount } from "vue";
import _ from "lodash";
import Table from "./tableContent.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { BarChart, BarSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
]);
type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
>;

const config = inject("config") as any;
const yoyStore = inject("yoyStore") as any;
//全局事件总线
const { proxy } = useCurrentInstance();
const echartsRef = ref<HTMLDivElement>();

const state: {
  option: any;
  charts: any[];
  optionNullTwo: any; //折线图无数据占位
} = reactive({
  option: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["本期", "同期"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: [],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [],
  },
  optionNullTwo: {
    backgroundColor: "transparent",
    title: {
      text: "暂无数据",
      x: "center",
      y: "center",
      textStyle: {
        fontWeight: "normal",
        fontSize: 16,
      },
    },
  },
  charts: [],
});

//初始化图表
const initEcharts = (options: any) => {
  console.log("初始化图表options", options);
  const paramsChart = echarts.init(echartsRef.value as HTMLDivElement);
  paramsChart.setOption(options);
  state.charts.push(paramsChart);
};

//处理同比数据
const resetYoyData = (data: any[]) => {
  let len = data.length;
  let optionxAxisData: any = [];
  //本期数据
  let currentObj: any = {
    name: "本期",
    type: "bar",
    stack: "TotalCurrent",
    label: {
      show: true,
    },
    emphasis: {
      focus: "series",
    },
    data: [],
  };
  //同期数据
  let samePeriodObj: any = {
    name: "同期",
    type: "bar",
    stack: "TotalSamePeriod",
    label: {
      show: true,
    },
    emphasis: {
      focus: "series",
    },
    data: [],
  };
  for (let i = 0; i < len; i++) {
    currentObj.data.push(data[i].num);
    samePeriodObj.data.push(data[i].lastnum);
    optionxAxisData.push(data[i].bymonth + "月");
  }
  state.option.series = [currentObj, samePeriodObj];
  (state.option.xAxis = [
    {
      type: "category",
      axisTick: {
        show: false,
      },
      data: optionxAxisData,
    },
  ]),
    console.log("遍历数据便于图表展示", state.option);
  //初始化图表
  setTimeout(() => {
    initEcharts(state.option);
  }, 500);
};

proxy.eventBus.on("yoyData", (data: any) => {
  //处理同比数据
  if (data.length > 0) {
    resetYoyData(data);
  } else {
    initEcharts(state.optionNullTwo);
  }
});

onBeforeUnmount(() => {
  proxy.eventBus.off("yoyData");
});
</script>
<style lang="scss" scoped>
.SubItemAnalysisPage {
  width: 100%;
  height: 100%;
  .echartsClass {
    width: 100%;
    height: 15rem;
  }
}
</style>
